﻿@model Piedone.ThemeOverride.ViewModels.EditorViewModel

@{
    Layout.Title = T("Theme Override Settings");

    Style.Include("theme-override-admin.css");
    Script.Require("AceEditor.NoConflict").AtFoot();
}

<h1>@T("Theme Override Settings")</h1>

<div class="hint">
    @T("Here you can override the current theme's styling, scripts and placement.")
</div>

@Html.ValidationSummary()

@using (Html.BeginFormAntiForgeryPost())
{
    @Html.HiddenFor(m => m.CustomStylesContent)
    @Html.HiddenFor(m => m.CustomHeadScriptContent)
    @Html.HiddenFor(m => m.CustomFootScriptContent)
    @Html.HiddenFor(m => m.CustomPlacementContent)

    <fieldset id="theme-override-favicon">
        <legend>@T("Favicon")</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.FaviconUrl, T("Favicon URL"))
                @Html.TextBoxFor(m => m.FaviconUrl, new { @class = "text large" })
                <span class="hint">@T("The URL the favicon will be fetched from. Can be a relative or absolute URL.")</span>
            </li>
        </ol>
    </fieldset>
    
    <fieldset id="theme-override-stlyes">
        <legend>@T("Styles")</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.StylesheetUrls, T("Stylesheet URLs"))
                @Html.TextAreaFor(m => m.StylesheetUrls, new { @class = "text large" })
                <span class="hint">@T("You can include existing stylesheets (one per line) here. The stylesheets will keep their order. This is meant for external stylesheets but will work for internal ones too. When including external stylesheets it's advised to use the protocol-relative URL format (i.e. not http:// but //).")</span>
            </li>
            <li>
                @Html.LabelFor(m => m.CustomStylesContent, T("Custom styles"))
                <div id="theme-override-custom-styles-editor">@Model.CustomStylesContent</div>
                <span class="hint">@T("This stylesheet will be included last, so you can override any styling.")</span>
            </li>
        </ol>
    </fieldset>
    <fieldset id="theme-override-scripts">
        <legend>@T("Scripts")</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.HeadScriptUrls, T("Head script URLs"))
                @Html.TextAreaFor(m => m.HeadScriptUrls, new { @class = "text large" })
                <span class="hint">@T("You can include an existing scripts (one per line) here for the head. The scripts will keep their order. This is meant for external scripts but will work for internal ones too. When including external scripts it's advised to use the protocol-relative URL format (i.e. not http:// but //).")</span>
            </li>
            <li>
                @Html.LabelFor(m => m.CustomHeadScriptContent, T("Custom head script"))
                <div id="theme-override-custom-head-script-editor">@Model.CustomHeadScriptContent</div>
                <span class="hint">@T("This head script will be included last, so you can override any head script behaviour.")</span>
            </li>
            <li>
                @Html.LabelFor(m => m.FootScriptUrls, T("Foot script URLs"))
                @Html.TextAreaFor(m => m.FootScriptUrls, new { @class = "text large" })
                <span class="hint">@T("You can include an existing scripts (one per line) here for the foot. The scripts will keep their order. This is meant for external scripts but will work for internal ones too. When including external scripts it's advised to use the protocol-relative URL format (i.e. not http:// but //).")</span>
            </li>
            <li>
                @Html.LabelFor(m => m.CustomFootScriptContent, T("Custom foot script"))
                <div id="theme-override-custom-foot-script-editor">@Model.CustomFootScriptContent</div>
                <span class="hint">@T("This foot script will be included last, so you can override any head script behaviour.")</span>
            </li>
        </ol>
    </fieldset>
    <fieldset id="theme-override-placement">
        <legend>@T("Placement")</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.CustomPlacementContent, T("Custom placement declaration"))
                <div id="theme-override-custom-placement-editor">@Model.CustomPlacementContent</div>
                <span class="hint">@T("Provide a placement XML declaration (just as in a Placement.info file; you don't have to include the root &lt;Placement&gt; tag). This placement will override anything else. For more information on the format see <a href=\"http://docs.orchardproject.net/Documentation/Understanding-placement-info\">the documentation</a>.")</span>
            </li>
        </ol>
    </fieldset>
    <fieldset>
        <button class="primaryAction" type="submit" name="submit.Save" value="submit.Save">@T("Save")</button>
        <span class="hint">@T("If the <a href=\"http://combinator.codeplex.com\">Combinator module</a> is installed for resource bunding and minification then its cache will be automatically emptied when saving overrides.")</span>
    </fieldset>
}

@using (Script.Foot())
{
    <script type="text/javascript">
        (function ($) {
            $(function () {
                $("#theme-override-favicon legend, #theme-override-stlyes legend, #theme-override-scripts legend, #theme-override-placement legend")
                    .expandoControl(function (controller) { return controller.next("ol"); }, { collapse: true, remember: true });

                var styleEditor = ace.edit("theme-override-custom-styles-editor");
                styleEditor.getSession().setMode("ace/mode/css");
                var headScriptEditor = ace.edit("theme-override-custom-head-script-editor");
                headScriptEditor.getSession().setMode("ace/mode/javascript");
                var footScriptEditor = ace.edit("theme-override-custom-foot-script-editor");
                footScriptEditor.getSession().setMode("ace/mode/javascript");
                var placementEditor = ace.edit("theme-override-custom-placement-editor");
                placementEditor.getSession().setMode("ace/mode/xml");

                var $styleOverride = $("#@Html.FieldIdFor(m => m.CustomStylesContent)");
                $($styleOverride[0].form).submit(function () {
                    $styleOverride.val(styleEditor.getValue());
                    $("#@Html.FieldIdFor(m => m.CustomHeadScriptContent)").val(headScriptEditor.getValue());
                    $("#@Html.FieldIdFor(m => m.CustomFootScriptContent)").val(footScriptEditor.getValue());
                    $("#@Html.FieldIdFor(m => m.CustomPlacementContent)").val(placementEditor.getValue());
                });
            });
        })(jQuery);
    </script>
}
